<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 取值的写法 只可以取值，赋值会有提示 computed value is readonly
// const fullName = computed(() => {
//   return firstName.value + '--' + lastName.value
// })

// 只有在计算属性需要赋值时才写
// 大部分情况下用 上面的简写形式即可
const fullName = computed({
  // 获取值的部分，用 return 进行返回
  get() {
    return firstName.value + '--' + lastName.value
  },
  // 计算属性如果实现了 set 就不会有警告
  // 可以通过 value 获取到设置的值
  set(value) {
    firstName.value = value.split(' ')[0]
    lastName.value = value.split(' ')[1]
  }
})
</script>


<template>
  <div id="app">
    <h2>全名：{{ fullName }}</h2>
    <button @click="fullName='rose li'">计算属性赋值</button>
  </div>
</template>

<style>

</style>
